<template>
  <div class="w-full min-h-screen bg-gray-50 relative">
    <div class="bg-white border-b border-gray-100">
      <div class="flex items-center justify-between px-4 py-3">
        <div class="flex items-center">
          <button @click="$router.back()" class="mr-4 text-gray-600">
            <i class="fas fa-arrow-left"></i>
          </button>
          <h1 class="text-lg font-semibold text-gray-800">通知设置</h1>
        </div>
      </div>
    </div>

    <div class="px-4 py-6 pb-20">
      <div class="bg-white rounded-lg shadow-sm">
        <div class="p-4 border-b border-gray-100">
          <div class="flex items-center justify-between mb-4">
            <span class="text-gray-800 font-medium">推送通知</span>
            <label class="relative inline-flex items-center cursor-pointer">
              <input v-model="notificationSettings.pushEnabled" type="checkbox" class="sr-only peer" />
              <div
                class="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-blue-600"
              ></div>
            </label>
          </div>

          <div class="space-y-4 ml-4">
            <div class="flex items-center justify-between">
              <span class="text-gray-700">新剧更新通知</span>
              <label class="relative inline-flex items-center cursor-pointer">
                <input
                  v-model="notificationSettings.newEpisodes"
                  type="checkbox"
                  class="sr-only peer"
                  :disabled="!notificationSettings.pushEnabled"
                />
                <div
                  class="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-blue-600 disabled:opacity-50"
                ></div>
              </label>
            </div>
            <div class="flex items-center justify-between">
              <span class="text-gray-700">收藏内容更新</span>
              <label class="relative inline-flex items-center cursor-pointer">
                <input
                  v-model="notificationSettings.favoritesUpdate"
                  type="checkbox"
                  class="sr-only peer"
                  :disabled="!notificationSettings.pushEnabled"
                />
                <div
                  class="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-blue-600 disabled:opacity-50"
                ></div>
              </label>
            </div>
            <div class="flex items-center justify-between">
              <span class="text-gray-700">活动通知</span>
              <label class="relative inline-flex items-center cursor-pointer">
                <input
                  v-model="notificationSettings.activities"
                  type="checkbox"
                  class="sr-only peer"
                  :disabled="!notificationSettings.pushEnabled"
                />
                <div
                  class="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-blue-600 disabled:opacity-50"
                ></div>
              </label>
            </div>
          </div>
        </div>

        <div class="p-4 border-b border-gray-100">
          <div class="flex items-center justify-between mb-4">
            <span class="text-gray-800 font-medium">声音提醒</span>
            <label class="relative inline-flex items-center cursor-pointer">
              <input v-model="notificationSettings.soundEnabled" type="checkbox" class="sr-only peer" />
              <div
                class="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-blue-600"
              ></div>
            </label>
          </div>

          <div class="space-y-4 ml-4">
            <div class="flex items-center justify-between">
              <span class="text-gray-700">震动反馈</span>
              <label class="relative inline-flex items-center cursor-pointer">
                <input
                  v-model="notificationSettings.vibration"
                  type="checkbox"
                  class="sr-only peer"
                  :disabled="!notificationSettings.soundEnabled"
                />
                <div
                  class="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-blue-600 disabled:opacity-50"
                ></div>
              </label>
            </div>
            <div class="flex items-center justify-between">
              <span class="text-gray-700">通知横幅</span>
              <label class="relative inline-flex items-center cursor-pointer">
                <input
                  v-model="notificationSettings.banner"
                  type="checkbox"
                  class="sr-only peer"
                  :disabled="!notificationSettings.soundEnabled"
                />
                <div
                  class="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-blue-600 disabled:opacity-50"
                ></div>
              </label>
            </div>
          </div>
        </div>

        <div class="p-4">
          <h3 class="font-semibold text-gray-800 mb-2">免打扰时段</h3>
          <div class="space-y-4">
            <div class="flex items-center justify-between">
              <span class="text-gray-700">启用免打扰</span>
              <label class="relative inline-flex items-center cursor-pointer">
                <input v-model="notificationSettings.doNotDisturb" type="checkbox" class="sr-only peer" />
                <div
                  class="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-blue-600"
                ></div>
              </label>
            </div>
            <div v-if="notificationSettings.doNotDisturb" class="flex items-center justify-between">
              <span class="text-gray-700">时段设置</span>
              <span class="text-sm text-gray-500">23:00 - 8:00</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'

const notificationSettings = ref({
  pushEnabled: true,
  newEpisodes: true,
  favoritesUpdate: true,
  activities: false,
  soundEnabled: true,
  vibration: true,
  banner: true,
  doNotDisturb: false
})
</script>
